<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link rel="stylesheet" href="swiper/css/swiper.css">
<script src="swiper/js/swiper.js"></script>
<script src="../lib/vue.min.js"></script>

<style>
  .swiper-container {
      width: 600px;
      height: 300px;
  }  
</style>
</head>
<body>
  <div id="box">
      <div class="swiper-container a">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(data,index) in list" v-swipe="{
                 index:index,
                 length:list.length
              }">
                {{data}}
              </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        
      </div>

  </div>

    <script type="text/javascript">
    
      Vue.directive("swipe",{
        inserted(el,bind){
          console.log(bind.value)
          if(bind.value.index === bind.value.length-1){
            new Swiper ('.a',{
              // direction: 'vertical'
              loop:true,
                  // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
              }
            })
          }
        }
      })
      
      new Vue({
        el:"#box",
        data:{
          list:[]
        },
        mounted() {
          setTimeout(()=>{
            this.list= ["1111","2222","3333"]
          },2000)
        },

      })
     


    </script>
</body>
</html>